<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>你行你上</title>
		<link rel="stylesheet" href="./libs/css/mdui.css" />
		<link rel="stylesheet" href="./css/chat.css"/>
		<!--<link rel="stylesheet" class="ui" href="./css/semantic.min.css"/>-->
		<!--<link rel="stylesheet" class="ui" href="./css/body.css"/>-->
		<!--<link rel="stylesheet" class="ui" href="./css/chat.css"/>-->
		<style>
			.main.container {
				padding-top: 45px;
			}
		</style>
	</head>

	<body class="mdui-theme-primary-deep-purple">
		<!-- Top Bar  -->
		<div class="mdui-toolbar mdui-color-theme">
			<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe5d2;</i></a>
			<span class="mdui-typo-title">你行你上</span>
			<div class="mdui-toolbar-spacer"></div>
			<!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe8b6;</i></a>-->
			<!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe5d5;</i></a>-->
			<span id="username">请登陆</span>
			<a href="/logout" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe879;</i></a>
			<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe5d4;</i></a>
		</div>
		<!--<div class="ui fixed transparent inverted main menu">
    <div class="container">
        <div class="title item">
            <b>你行你上</b> 在线聊天系统
        </div>

        <div class="right menu">
            <div class="title item">
            </div>
        </div>
        <div id="user_info" class="right menu hide">
            <div class="title item">
                <i class="icon user"></i>
                <label id="username">the5fire</lable>
            </div>
            <a class="popup icon github item" href="/logout" title="退出登录">
                退出登录
            </a>
        </div>
    </div>
</div>-->

		<div class="mdui-container" id="main-box">
			<div class="mdui-col-xs-8 mdui-col-offset-xs-2" id="login-reg-box">
				<!--登录模块-->
				<div class="mdui-col-xs-8 mdui-col-offset-xs-2 mdui-card" id="login-box">
					<h1>登陆</h1>
					<div class="mdui-textfield">
						<i class="mdui-icon material-icons">&#xe853;</i>
						<label class="mdui-textfield-label">User name</label>
						<input class="mdui-textfield-input" id="login-username" type="text" />
					</div>
					<div class="mdui-textfield">
						<i class="mdui-icon material-icons">&#xe897;</i>
						<label class="mdui-textfield-label">Password</label>
						<input class="mdui-textfield-input" id="login-pwd" type="password" />
					</div>
					<button class="mdui-btn mdui-btn-block mdui-color-theme" id="login-btn">登陆</button>
				</div>

				<!--注册模块-->
				<div class="mdui-col-xs-8 mdui-col-offset-xs-2 mdui-card" id="reg-box">
					<h1>注册</h1>
					<div class="mdui-textfield">
						<i class="mdui-icon material-icons">&#xe853;</i>
						<label class="mdui-textfield-label">User name</label>
						<input class="mdui-textfield-input" id="reg-username" type="text" />
					</div>
					<div class="mdui-textfield">
						<i class="mdui-icon material-icons">&#xe897;</i>
						<label class="mdui-textfield-label">Password</label>
						<input class="mdui-textfield-input" id="reg-pwd" type="password" />
					</div>
					<div class="mdui-textfield">
						<i class="mdui-icon material-icons">&#xe897;</i>
						<label class="mdui-textfield-label">Password Again</label>
						<input class="mdui-textfield-input" id="reg-pwd-repeat" type="password" />
					</div>
					各种不合理条款
					<label class="mdui-radio" for="agree">
    					<input type="radio" name="agree" required="required"/>
    					<i class="mdui-radio-icon"></i>
    					同意
  					</label>
  					<label class="mdui-radio" for="disagree">
    					<input type="radio" name="disagree" required="required"/>
    					<i class="mdui-radio-icon"></i>
    					不同意
  					</label>
					<button class="mdui-btn mdui-btn-block mdui-color-theme" id="reg-btn">注册</button>
				</div>
			</div>

			<!--登陆后主页面/话题模块-->
			<div class="mdui-col-xs-8 mdui-col-offset-xs-2 mdui-card" id="topic-box">
				<div id="topic-list">

				</div>
			</div>

			<!--新增话题模块-->
			<div class="mdui-col-xs-8 mdui-col-offset-xs-2 mdui-card" id="add-topic-box" style="display:none">
				<h2>上墙</h2>
				<div class="mdui-textfield">
					<i class="mdui-icon material-icons">&#xe897;</i>
					<label class="mdui-textfield-label">新话题</label>
					<input class="mdui-textfield-input" id="add-topic-input" type="text" />
				</div>
				<button class="mdui-btn mdui-btn-block mdui-color-theme" id="add-topic-btn">上墙</button>
			</div>

			<div class="mdui-col-xs-8 mdui-col-offset-xs-2 mdui-card" id="message-box" style="display:none">
				<!--<div class="column">-->
				<a class="mdui-btn mdui-color-theme" href="#index"><i class="mdui-icon material-icons">&#xe5c4;</i>返回列表</a>
				<!--<div class="ui piled blue segment">-->
				<h2>
                    #<i id="message-head" class=""></i>#
                </h2>
				<div id="message-list">
					<!-- comments section -->
				</div>
				<div class="mdui-textfield">
					<i class="mdui-icon material-icons">&#xe897;</i>
					<label class="mdui-textfield-label">我就不上，我就BB</label>
					<input class="mdui-textfield-input" id="add-message-input" type="text" />
				</div>
				<button class="mdui-btn mdui-btn-block mdui-color-theme" id="add-message-btn">我就BB</button>

				<!--</div>-->
				<!--</div>-->
			</div>
		</div>


		<!--<div id="wrapper" style="display: block; z-index: 998;">
    <div class="container">
        <div id="login" class="ui two column relaxed grid">
            <div class="column">
                <div class="ui fluid form segment">
                    <h3 class="ui header">登录</h3>
                    <div class="field">
                        <label>用户名</label>
                        <input id="login_username" placeholder="用户名" type="text">
                    </div>
                    <div class="field">
                        <label>密码</label>
                        <input id="login_pwd" type="password">
                    </div>
                    <div class="ui blue login_submit button">登录</div>
                </div>
            </div>
            <div class="column">
                <div class="ui fluid form segment">
                    <h3 class="ui header">注册</h3>
                    <div class="field">
                        <label>用户名</label>
                        <input id="reg_username" placeholder="用户名" type="text">
                    </div>
                    <div class="field">
                        <label>密码</label>
                        <input id="reg_pwd" type="password">
                    </div>
                    <div class="field">
                        <label>重复密码</label>
                        <input id="reg_pwd_repeat" type="password">
                    </div>
                    <div class="inline field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="terms">
                            <label for="terms">我同意the5fire's WeChat网的服务条款。</label>
                        </div>
                    </div>
                    <div class="ui blue registe_submit button" id="sign">注册</div>
                </div>
            </div>
        </div>
    </div>
</div>-->

		<!-- Content -->

		<!--<div id="main" class="main container">

     Topic List 
    <div id="topic_section">
        <div id="topic_list" class="ui three column grid">
        </div>
        <div id="topic_form" class="ui error form segment">
            <div class="two fields">
                <div class="field">
                    <label>新建Topic</label>
                    <input id="topic_title" placeholder="topic" type="text">
                </div>
            </div>
            <div class="ui blue submit_topic button">Add</div>
        </div>
    </div>

     Message 
    <div  id="message_section" class="ui column grid hide" style="display:none">
        <div class="column">
            <div class="circular ui button"><a href="#index">返回列表</a></div>
            <div class="ui piled blue segment">
                <h2 class="ui header">
                    #<i id="message_head"></i>#
                </h2>
                <div id="message_list" class="ui comments">
                     comments section 
                </div>
                <div class="ui reply form">
                    <div class="field">
                        <input type="text" id="comment"/>
                    </div>
                    <div id="submit" data="" class="ui fluid blue labeled submit icon button">
                        <i class="icon edit"></i> 我也来说一句！
                    </div>
                </div>
            </div>
        </div>
    </div>-->

		<!-- template -->
		<script type="text/html" id="topic-template">
			<div class="topic-card">
				<a href="#topic/{{id}}" style="text-decoration: none;">
					<div class="mdui-card">
						<h3 class="mdui-text-color-theme topic-title">#{{title}}#</h3>
						<p class="mdui-text-color-theme topic-owner">{{owner}}</p>
						<p class="mdui-text-color-theme topic-created-time">{{created_time}}</p>
					</div>
				</a>
			</div>	
		</script>

		<script type="text/html" id="message-template">
			<div class="aMessage  " data="{{id}}">
				{{if is_mime == 1}} 
					<div class="message-content mdui-color-blue self">
						<p>{{content}}</p>
					</div>
					<div class="message-info mdui-color-blue self">
						<span class="message-user-name">{{username}}</span>
						<br/>
						<span class="message-created-time">{{created_time}}</span>
					</div>
				{{else}}
					<div class="message-content mdui-color-theme">
						<p>{{content}}</p>
					</div>
					<div class="message-info mdui-color-theme">
						<span class="message-user-name">{{username}}</span>
						<br/>
						<span class="message-created-time">{{created_time}}</span>
					</div>
				{{/if}}
			</div>
		</script>

		</div>
		<script src="/libs/js/mdui.js"></script>
		<script src="/libs/js/jquery.js"></script>
		<script src="/libs/js/underscore.js"></script>
		<script src="/libs/js/backbone.js"></script>
		<script src="/libs/js/template.js"></script>
		<script src="/js/chat.js"></script>
	</body>

</html>